<template>
  <div style="width:100%">
    <div class="form">
      <el-select v-model="form.deliverType" class="form--select">
        <el-option
          v-for="item of options"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        ></el-option>
      </el-select>
    </div>

    <m-table
      :data="orders"
      :selection="false"
      :custom="true"
      :columns="columns"
      :needHoverBorder="true"
      multipleKey="itemVoList"
    >
      <template v-slot:header="{ row }">
        <div
          class="order--header"
          :class="isClose(row.status) && 'order__close'"
        >
          <span style="margin-right:50px">订单号：{{ row.orderId }}</span>
          <span style="margin-right:50px">
            创建时间：{{ row.createTime }}
          </span>
        </div>
      </template>

      <template v-slot:custom-body="{ row }">
        <template v-for="(goods, i) of row.itemVoList">
          <tr :key="i">
            <td>
              <div class="table__goods">
                <div class="table__goods--image">
                  <img :src="goods.productPic" :alt="goods.productName" />
                </div>
                <div class="table__goods--info">
                  <div class="goods--name">
                    {{ goods.productName | strFilter }}
                  </div>
                  <div class="goods--specs">
                    <span class="l">{{ goods.specs }}</span>
                  </div>
                  <div class="goods--price">
                    <span> ￥{{ goods.productPrice.toFixed(2) }} </span>
                    <span class="specs">
                      <span class="r">×{{ goods.productQuantity }}</span>
                    </span>
                  </div>
                </div>
              </div>
            </td>

            <td v-if="i === 0" :rowspan="row.itemVoList.length">
              <div class="table__user">
                <div class="user--name">
                  <span>{{ row.userName }}</span> <br />
                  ({{ row.receiverName }},{{ row.receiverPhone }})
                </div>
              </div>
            </td>

            <td
              v-if="i === 0"
              :rowspan="row.itemVoList.length"
              class="text--center"
            >
              ￥{{ row.payAmount }}
            </td>

            <td
              v-if="i === 0"
              :rowspan="row.itemVoList.length"
              class="text--center"
            >
              <template v-if="row.deliveryType === 'SHIPPED'">
                付款成功
              </template>
              <template else>
                {{ getOrderStatusName(row.status) }}
              </template>
            </td>
          </tr>
        </template>
      </template>
    </m-table>
    <div class="order__control--bottom form" style="width:100%">
      <el-pagination
        small
        layout="total,  prev, pager, next,  sizes"
        :current-page.sync="form.current"
        :size.sync="form.size"
        :page-size.sync="form.size"
        :page-sizes="[10, 20, 50, 100]"
        :total.sync="form.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { getIncentiveOrder } from "@/api/finance/index";
import {
  getDeliverOrderStatusName,
  getDeliveryTypeName,
  isClose,
  strFilter,
} from "@/views/order/common/order";

@Component({ filters: { strFilter } })
export default class OderTable extends Vue {
  /** 外围选择的行，激励计划用 */
  @Prop()
  currentData: any;

  orders = [];

  form = {
    current: 1,
    size: 10,
    deliverType: "102",
  };

  options = [
    {
      label: "快递订单",
      value: "102",
    },
  ];

  total = 0;

  /** 表头 */
  columns = [
    {
      label: "商品",
      width: 270,
      coustomStyle: "text-align: left;",
    },
    {
      label: "客户",
      width: 220,
      coustomStyle: "text-align: left;",
    },
    {
      label: "交易额",
      width: 114,
    },
    {
      label: "订单状态",
      width: 115,
    },
  ];

  @Watch("form.deliverType")
  deliverTypeChange() {
    this.getOrder();
  }

  @Watch("form.current")
  currentChange() {
    this.getOrder();
  }

  @Watch("form.size")
  sizeChange() {
    this.getOrder();
  }

  mounted() {
    this.getOrder();
  }

  /** 获取订单数据 */
  getOrder() {
    getIncentiveOrder(Object.assign({}, this.currentData, this.form))
      .then(res => {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { list, ...other } = res.data;
        Object.assign(this.form, other);
        this.orders = res.data.list;
      })
      .catch(err => {
        this.$message.warning(err || "详情获取失败");
      });
  }

  /** 物流按钮显示隐藏 */
  logisticsBtnVisible(item) {
    const other = ["WAIT_FOR_PAY", "WAIT_FOR_SEND", "COMPLETE"];
    return (
      !isClose(item.status) &&
      !other.includes(item.status) &&
      item.deliveryType === "LOGISTICS"
    );
  }

  getOrderStatusName = getDeliverOrderStatusName;

  getDeliveryTypeName = getDeliveryTypeName;

  isClose = isClose;
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/order/order.scss";

.form {
  @include flex(flex-end);
  width: 100%;

  .form--select {
    margin-left: auto;
    margin-bottom: 10px;
  }
}

.fixed {
  position: fixed;
  bottom: 0;
}
</style>
